<script setup lang="ts">
import type { JobLogVO } from '#/api/monitor/jobLog/model';

import { ref, shallowRef } from 'vue';

import { useVbenModal } from '@vben/common-ui';
import { DictEnum } from '@vben/constants';

import { Descriptions, DescriptionsItem, Tag } from 'ant-design-vue';
import { DescriptionsItemProps } from 'ant-design-vue/es/descriptions';

import { jobLogInfo } from '#/api/monitor/jobLog';
import { renderDict, renderJsonPreview } from '#/utils/render';

const isUpdate = ref(false);

const currentLog = shallowRef<JobLogVO | null>(null);

const [BasicModal, modalApi] = useVbenModal({
  // 在这里更改宽度
  class: 'w-[550px]',
  fullscreenButton: false,
  onClosed() {
    currentLog.value = null;
  },
  onOpenChange: async (isOpen) => {
    if (!isOpen) {
      return null;
    }
    modalApi.modalLoading(true);

    const { id } = modalApi.getData() as { id?: number | string };
    isUpdate.value = !!id;

    if (isUpdate.value && id) {
      const record = await jobLogInfo(id);
      currentLog.value = record;
    }
    modalApi.modalLoading(false);
  },
});
</script>

<template>
  <BasicModal title="调度日志详情">
    <Descriptions v-if="currentLog" size="small" bordered :column="1">
      <DescriptionsItem label="日志编号" :label-style="{ minWidth: '120px' }">
        {{ currentLog.jobLogId }}
      </DescriptionsItem>
      <DescriptionsItem label="执行结果">
        <component
          :is="renderDict(currentLog.status, DictEnum.SYS_COMMON_STATUS)"
        />
      </DescriptionsItem>
      <DescriptionsItem label="任务编号">
        <div class="flex items-center">
          <Tag>{{ currentLog.jobId }}</Tag>
        </div>
      </DescriptionsItem>
      <DescriptionsItem label="任务名称">
        <div class="max-h-[300px] overflow-y-auto">
          <component :is="renderJsonPreview(currentLog.jobName)" />
        </div>
      </DescriptionsItem>
      <DescriptionsItem label="调度方法">
        {{ currentLog.invokeTarget }}
      </DescriptionsItem>

      <DescriptionsItem label="请求参数">
        <div class="max-h-[300px] overflow-y-auto">
          <component :is="renderJsonPreview(currentLog.req)" />
        </div>
      </DescriptionsItem>
      <DescriptionsItem label="请求耗时">
        {{ `${currentLog.executeTime} ms` }}
      </DescriptionsItem>
      <DescriptionsItem label="操作时间">
        {{ `${currentLog.createTime}` }}
      </DescriptionsItem>
      <DescriptionsItemProps label="执行日志">
        {{ currentLog.jobMessage }}
      </DescriptionsItemProps>
      <DescriptionsItemProps v-if="currentLog.exceptionInfo" label="异常信息">
        <span class="font-semibold text-red-600">
          {{ currentLog.exceptionInfo }}
        </span>
      </DescriptionsItemProps>
    </Descriptions>
  </BasicModal>
</template>
